<template xmlns="http://www.w3.org/1999/html">
    <!--    <sea-net-frame ref="frameRef" url="/sys/dic/list" :where="object">-->
    <font-net-frame ref="frameRef" :query="dict.list" :where="object" :pagination="false" :active="props.active">
        <!-- form-header -->
        <template #title>
            <sea-table-title slot="title" title="数据字典"
                             subtitle="规划：添加时，增加一行，允许行内编辑！"></sea-table-title>
        </template>

        <!-- form-buttons -->
        <template #buttons>
            <el-button plain title="新增" @click="onAction('new', undefined, undefined)">
                <i class="fa fa-fw fa-plus"></i>
            </el-button>
        </template>

        <!-- form-data -->
        <template #default="{list}">
            <el-table :data="list" border>
                <el-table-column prop="id" label="#" width="96"></el-table-column>
                <el-table-column label="界面效果" width="200">
                    <template #default="{row}">
                        <span :class="row.style">{{ row.label }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述"></el-table-column>
                <sea-col-input property="label" label="Label" width="200" :change="onAction"></sea-col-input>
                <sea-col-input property="value" label="Value" width="200" :change="onAction"></sea-col-input>
                <sea-col-input property="style" label="样式" :change="onAction"></sea-col-input>
                <sea-col-input property="valueType" label="字段类型" width="200" :change="onAction"></sea-col-input>
                <sea-col-input property="orderBy" label="排序" width="100" :change="onAction"></sea-col-input>

                <!--操作栏-->
                <sea-table-actionbar width="120" :action="onAction" :buttons="buttons"></sea-table-actionbar>
            </el-table>
        </template>
    </font-net-frame>
    <!--    </sea-net-frame>-->
</template>

<script setup lang="ts">
import {ref, watch} from "vue";
import dict from "./dict";
import Layers from "@/lang/layers/index.js";

/**
 * 修改界面
 */
interface Props {
    /**
     * 成功回调，通常是刷新数据表格
     */
    object: Record<string, any>;
    /**
     * 是否激活：退出编辑的时候，需要置空内容，或者提交表单内容
     */
    active?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    active: false
});

watch(() => props.object, (val) => {
    console.log(val);
});


watch(() => props.active, (val) => {
    if(!props.active){

    }
});

const frameRef = ref();

const buttons = ref([
    {type: 'btn', evt: 'del', label: '删除', title: '删除当前行'}
])

/**
 * 事件分发
 *
 * @param evt   事件名称
 * @param row   行级数据，可以直接修改
 * @param arg   发生变动的数据信息
 */
const onAction = (evt, row, arg) => {
    if (evt === 'new') {
        dict.create({
            schemaName: props.object.schemaName
            , tableName: props.object.tableName
            , columnName: props.object.columnName
        }).then(ret => {
            if (ret.code === 0) {
                Layers.warn("已经增加一行，直接点击单元格进行编辑!");
                frameRef.value.reload();
            }
        })
    } else if (evt === 'del') {
        dict.remove(row.id).then(result => {
            if (result.code === 0) {
                Layers.succeed();
                frameRef.value.reload();
            }
        });
    } else if (evt === '$edit') {
        // 行级编辑
        arg.id = row.id;
        dict.modify(arg).then(result => {
            if (result.code === 0) {
                Layers.succeed();
                row[arg.field] = arg.value;
            }
        });
    }
}
</script>
